@import '../vars.scss';
//元素居中
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

//具有弹出菜单的li标签
@mixin dropdown {
  background: white;
  border: solid 1px #999;
  border-top-color: #fff;
  border-bottom-color: #fff;
}

//弹出子菜单容器
@mixin dropdown-container {
  position: absolute;
  border: solid 1px #999;
  padding: 10px;

  background: #fff;
  top: calc(100% - 1px);
  display: none;
}
header {
  .container {
    & > .menus {
      display: flex;
      li {
        display: flex;
        &::after {
          content: '';
          height: 10px;
          width: 1px;
          background-color: #999;
          transform: translateY(5px);
          margin: 0 5px;
        }
        &.dropdown:hover {
          & > a {
            @include dropdown();
          }
          & > div {
            display: grid;
          }
        }
        &:nth-of-type(1) {
          margin-right: 0px;
        }
        a {
          color: $fontColor;
          z-index: 1;
          border: solid 1px transparent;
          padding: 0 5px;
          @include center;
          & > i.fa {
            font-size: 12px;
            transform: translate(2px, -2px);
          }
          &.red {
            color: red;
          }
        }
        & > div {
          @include dropdown-container();
          &.navcat {
            left: 0;
            right: 0;
          }
        }
      }
    }
  }
}
